<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        canvas {
            /* background-color: black; */
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>
<script id="TextureVS" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    attribute vec2 a_Pin;
    varying vec2 v_Pin;
    void main(){
        gl_Position = a_Position;
        v_Pin = a_Pin;
    }
</script>
<script id="TextureFS" type="x-shader/x-fragment">
    precision mediump float;
    uniform sampler2D u_Sampler;
    varying vec2 v_Pin;
    void main(){
        gl_FragColor = texture2D(u_Sampler, v_Pin);
        //gl_FragColor = vec4(1.0,1.0,1.0,1.0);
    }
</script>
<script type="module">
    import { Matrix4, Vector3, Color, PerspectiveCamera, Spherical } from '../js/three.module.js';
    import { CreateProgram, imgPromise } from '../js/Utils.js';
    import lib from '../js/ThreeLib.js';
    import CameraController from '../js/CameraController.js'
    import Poly from '../js/Poly4.js'
    import Control from '../js/Control.js'

    import Geo from '../js/Poly2/Geo.js'
    import Mat from '../js/Poly2/Mat.js'
    import Obj3D from '../js/Poly2/Obj3D.js'
    import Scene from '../js/Poly2/Scene.js'
    import Frame from '../js/Poly2/Frame.js'



    //#region gl
    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const gl = canvas.getContext("webgl", { antialias: true, });
    //#endregion

    //#region 
    const program = CreateProgram(gl,
        document.querySelector('#TextureVS').innerText,
        document.querySelector('#TextureFS').innerText);

    const scene = new Scene({ gl });
    scene.regProgram('texture', {
        program: program,
        attribs: ['a_Position', 'a_Pin'],
        uniforms: ['u_Samper'],
    });
    //#endregion




    //main
    {


        const image = new Image();
        image.src = '../Image/Image01.jpg';

        image.addEventListener('load', function () {

            const len = 0.5;
            const obj = new Obj3D({
                geo: new Geo({
                    data: {
                        'a_Position': {
                            size: 2, array: new Float32Array([
                                -len, -len, len, -len, -len, len, len, len
                            ])
                        },
                        'a_Pin': {
                            size: 2, array: new Float32Array([
                                0, 0, 1, 0, 0, 1, 1, 1
                            ])
                        }
                    }
                }),
                mat: new Mat({
                    program: 'texture',
                    mode: ['TRIANGLE_STRIP'],
                    maps: {
                        'u_Sampler': {
                            image: image,
                            WRAP_W: gl.CLAMP_TO_EDGE,
                            WRAP_H: gl.CLAMP_TO_EDGE,
                            MIN_FILTER: gl.LINEAR,
                        }
                    }
                })
            });

            scene.add(obj);
            scene.draw();
        })


    }






</script>

</html>